<template>
  <div class="bind-phone">
    <div class="div-input">
      <label>手机号码</label>
      <input type="num" maxlength="11" v-model="phone" name="phone" placeholder="请输入新的手机号码">
    </div>
    <div class="div-input border-none">
      <label>短信验证码</label>
      <input type="text" name="code" v-model="code" placeholder="请输入验证码">
      <span v-show="sending == 'false'" @click="addCode">短信验证</span>
      <span v-show="sending == 'true'">{{time}}s</span>
    </div>
    <span class="submit-btn" @click="submit">提交</span>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script type="text/javascript"> 
  import { AlertModule, Toast } from 'vux'
  import { bindMobile, sendCode } from '@/api/api'
  export default {
    components: {
      Toast
    },
    data () {
      return {
        phone: '',
        code: '',
        is_toast: false,
        toast_con: '',
        sending: 'false',
        time: null,
        timer: null,
        codes: '',
      }
    },
    created () {
      this.uid = sessionStorage.getItem('uid')
      if(!localStorage.getItem('time')){
        localStorage.setItem('time', 60);
        localStorage.setItem('sending', false);
        this.time = 60;
      }else{
        this.time = localStorage.getItem('time');
        this.sending = localStorage.getItem('sending');
        if(this.time == 60 || this.time == 0){
          return;
        }
        this.timeout()
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      submit () {
        if(!this.phone || !this.code){
          AlertModule.show({
            title: '温馨提示',
            content: '输入内容不能为空'
          })
          return;
        }else if(this.code != this.codes){
          AlertModule.show({
            title: '温馨提示',
            content: '输入验证码不正确'
          })
          return;
        }
        var dataJson = {
          uid: this.uid,
          phone: this.phone,
        }
        bindMobile(dataJson).then((res) => {
          AlertModule.show({
            title: '温馨提示',
            content: res.data.msg,
            onHide: () => {
              this.router({path: './person'});
            }
          })
        }).catch((err) => {
          console.dir(err)
        })        
      },
      addCode() {
        if(!this.phone){
          AlertModule.show({
            title: '温馨提示',
            content: '请输入手机号码'
          })
          return;
        }
        sendCode(this.phone).then((res) => {
          this.is_toast = true;
          this.toast_con = res.data.info;
          console.log(res)
          if(res.data.status == '1'){
            this.codes = res.data.send_code;
            this.sending = 'true';
            localStorage.setItem('sending', true);
            if(this.timer){
              clearInterval(this.timer);
            }
            this.timeout()
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      // 倒计时
      timeout() {
        this.timer = setInterval(() => {
          if(this.time <=0){
            clearInterval(this.timer);
            this.sending = 'false';
            this.time = 60;
            localStorage.setItem('time', 60);
            localStorage.setItem('sending', false);
            return;
          }
          this.time--;
          localStorage.setItem('time', this.time);
        }, 1000)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .bind-phone
    background-color #f2f2f2
    height 100vh
    width 100vw
    .div-input
      display flex
      line-height 5rem
      height 5rem
      overflow hidden
      padding 0 1.5rem
      background-color #fff
      border-bottom 1px solid #e5e5e5
      position relative
      label
        width 6rem
        font-size 1.5rem
      input
        color #333
        background-color #fff
        height 3rem
        margin-top 1rem
        width 100%
        padding-left 1.5rem
        outline none
        font-size 1.5rem
        &::-webkit-input-placeholder
          color #999
      span
        width 9.2rem
        height 3.3rem
        line-height 3.3rem
        text-align center
        background-color #43A047
        border-radius .3rem
        position absolute
        right 1.5rem
        color #fff
        font-size 1.5rem
        top .85rem
      .ash
        background-color #ccc
    .border-none
      border none
    .submit-btn
      line-height 5rem
      background-color #43A047
      border-radius .3rem
      width 92%
      position relative
      left 4%
      display block
      text-align center
      font-size 1.6rem
      font-weight 500
      color #fff
      margin-top 1.5rem
</style>